<template>
  <mu-container>
    <mu-card style="width: 100%;max-width:400px; margin: 0 auto;">
      <mu-card-media :title="title">
        <img :src="image" />
      </mu-card-media>
      <mu-card-title title="选择一张图片" sub-title="“太难了不想看了嘤嘤嘤”"></mu-card-title>
      <mu-card-text>
        散落在指尖的阳光，我试着轻轻抓住光影的踪迹，它却在眉宇间投下一片淡淡的阴影。
        调皮的阳光掀动了四月的心帘，温暖如约的歌声渐起。
        似乎在诉说着，我也可以在漆黑的角落里，找到阴影背后的阳光，
        找到阳光与阴影奏出和谐的旋律。我要用一颗敏感赤诚的心迎接每一缕滑过指尖的阳光！
      </mu-card-text>
      <mu-card-actions>
        <mu-button flat @click="onSelect">选择</mu-button>
        <input type="file" accept="image/*" style="display:none" :id="id" @change="onChange" />
        <mu-button flat color="primary" @click="onAction" :disabled="!image">{{action}}</mu-button>
        <mu-button flat color="error" @click="$emit('on-close')" style="float:right">取消</mu-button>
      </mu-card-actions>
    </mu-card>
  </mu-container>
</template>
<script>
export default {
  name: 'ww-image-selector',
  props: {
    action: {
      type: String,
      default: '确定',
    },
    id: {
      type: String,
      default: 'upload_file',
    },
  },
  data: function () {
    return {
      image: '',
    }
  },
  computed: {
    title () {
      return this.image ? 'NICE!' : '你还没选呢'
    },
  },
  methods: {
    onSelect () {
      document.getElementById(this.id).click()
    },
    onChange (e) {
      this.image = e.target.files[0]
    },
    onAction () {
      this.$emit('on-action', this.image)
      this.$emit('on-close')
    },
  },
}
</script>
<style lang="scss" scoped>
img {
  max-height: 50vh;
}
</style>
